<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>上传轮播图片</title>
	<link rel="shortcut icon" href="favicon.ico">
    <link href="${pageContext.request.contextPath}/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/css/animate.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/css/style.min.css?v=4.1.0" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/css/bootstrap-fileinput/fileinput.css" rel="stylesheet" />
</head>
<body>
	<div class="container-fluid" style="margin-top: 30px">
		<form id="form" method="post" enctype="multipart/form-data">
			<div class="row form-group">
				<label class="col-md-4">图片上传:</label>
				<div class="col-sm-12">
					<input id="input-id" name="file" multiple type="file" data-show-caption="true">
				</div>
			</div>
		</form>
	</div>
<script src="${pageContext.request.contextPath}/js/jquery.min.js?v=2.1.4"></script>
<script src="${pageContext.request.contextPath}/js/bootstrap.min.js?v=3.3.6"></script>
<script src="${pageContext.request.contextPath}/js/plugins/layer/layer.min.js"></script>
<script src="${pageContext.request.contextPath}/js/bootstrap-fileinput/fileinput.min.js"></script>
<script src="${pageContext.request.contextPath}/js/bootstrap-fileinput/zh.js"></script>

<script type="text/javascript">
$(function() {
	initFileInput("input-id");
});

function initFileInput(ctrlName) {
	var control = $('#' + ctrlName);
	control.fileinput({
		language: 'zh', //设置语言
		uploadUrl: "../slideshow/insert.htm", //上传的地址
		allowedFileExtensions: ['jpg', 'gif', 'png'], //接收的文件后缀
		//uploadExtraData:{"id": 1, "fileName":'123.mp3'},
		uploadAsync: true, //默认异步上传
		showUpload: true, //是否显示上传按钮
		showRemove: true, //显示移除按钮
		showPreview: true, //是否显示预览
		showCaption: false, //是否显示标题
		browseClass: "btn btn-primary", //按钮样式
		dropZoneEnabled: true,//是否显示拖拽区域
		minImageWidth: 800, //图片的最小宽度
		minImageHeight: 600,//图片的最小高度
		maxImageWidth: 3579,//图片的最大宽度
		maxImageHeight: 2551,//图片的最大高度
		maxFileSize: 1024,//单位为kb，如果为0表示不限制文件大小
		minFileCount: 0,
		maxFileCount: 5, //表示允许同时上传的最大文件个数
		enctype: 'multipart/form-data',
		validateInitialCount: true,
		previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
		msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
		dropZoneTitle: "请通过拖拽图片文件放到这里", 
	}).on('filepreupload', function(event, data, previewId, index) { //上传中
		var form = data.form,
			files = data.files,
			extra = data.extra,
			response = data.response,
			reader = data.reader;
		console.log('文件正在上传');
	}).on("fileuploaded", function(event, data, previewId, index) { //一个文件上传成功
		console.log('文件上传成功！' + data.response.message);
	}).on('fileerror', function(event, data, msg) { //一个文件上传失败
		console.log('文件上传失败！' + data.response.message);
	})
}
</script>
</body>
</html>